<template>
    <div>
        <el-form :inline="true" :model="formInline" class="demo-form-inline">
            <el-form-item label="搜索">
                <el-input v-model="formInline.name" @keyup.native.enter="onSubmit" placeholder="请输入景点名称"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="onSubmit">查询</el-button>
            </el-form-item>
        </el-form>

        <el-divider content-position="left">景点列表</el-divider>

        <el-table :data="tableData" stripe style="width: 100%">
            <el-table-column prop="scenic_name" label="景点名称" width="100">
            </el-table-column>
            <el-table-column prop="scenic_desc" label="景点简介" width="200">
            </el-table-column>
            <el-table-column prop="scenic_img" label="展示">
                 <template slot-scope="scope">
                    <img :src="scope.row.scenic_img"  class="img"/>
                    <!-- <el-button @click="print(scope)" type="primary">scope</el-button> -->
                </template>
                <!-- <img src="" alt=""> -->
            </el-table-column>
            <el-table-column prop="scenic_price" label="票价/元" width="80">
            </el-table-column>
            <el-table-column  label="操作" width="180">
                <template slot-scope="scope">
                    <el-button type="primary" size="small" @click="edit(scope.row)" icon="el-icon-edit" ></el-button>
                    <el-button type="danger" size="small" icon="el-icon-delete" @click="del(scope.row)"></el-button>

                </template>
            </el-table-column>
           
        </el-table>
    </div>
</template>

<script>
import { getScenicListAPI, delScenicAPI, selectScenicByName } from '@/api'
    export default {
        data () {
            return {
                page: 0,
                pagesize: 5,
                isLoading: false,
                formInline: {
                    name:''
                },
                tableData: [ ]
            }
        },
        mounted() {
            //             
        },
        created() {
            this.getData()
            this.bindScroll()
        },
        // 页面销毁之前清除scroll
        destroyed() {
            this.clearScroll()
        },
        methods: {
            edit(data) {
                // console.log('传递的参数',data.scenic_id);
                this.$router.push({name:'/home/scenicUpdate',params:{scenic_id: data.scenic_id}})
            },
            del(data) {
                // console.log('删除景点',data);
                this.$confirm('确定永久删除景点？，是否继续', 'Tips', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(async () => {
                    const res = await delScenicAPI({ scenicId: data.scenic_id })
                    // console.log('删除景点请求', res);
                    if(res.data.code === 200) {
                        this.$message.success('成功删除景点！')
                    }
                    this.getData()
                }).catch(() => { })
                
            },
            async getData() {
                this.page ++
                this.isLoading = true
                let params = {page: this.page ,pagesize: this.pagesize}
                const res = await getScenicListAPI(params)
                this.tableData.push(...res.data.data)
                this.isLoading = false
                 if (this.page >= 5) {
                    this.page = 5
                    this.isLoading = false
                }
                // console.log('景点列表', res);
                
                // console.log('页面景点列表', this.tableData);
            },
            // 
            scrollHande() {
                if(this.isLoading) return
                // 内容高度
                var scrollH = document.documentElement.scrollHeight
                // 窗口高度
                var innerH = window.innerHeight
                // 滚动出去的内容高度
                var top = document.body.scrollTop || document.documentElement.scrollTop
                // 距底部200 时发送请求
                if (scrollH - top - innerH < 200) {
                    this.getData()
                }
            },
            // 绑定scroll 事件
            bindScroll() {
                window.addEventListener('scroll', () => {
                    console.log('滚动');
                    this.scrollHande()
                }  )
            },
            // 清除 scroll 事件
            clearScroll() {
                window.removeEventListener('scroll', this.scrollHande())
            },
            
            async onSubmit() {
                if (this.formInline.name.trim()) {
                    const res = await selectScenicByName({name: this.formInline.name})
                    // console.log('名字模糊查询景点', res);
                    this.tableData = res.data.data
                } else {
                    this.getData()
                }
                
            }
        },
       
    }
</script>
<style lang="scss" scoped>
.img{
    width:400px;
    // height: 400px;
}
</style>